<template>
    <el-drawer :visible.sync="show" size="1000px;" :append-to-body="true">
        <div slot="title">
            <h4 style="margin-bottom: 0;font-weight: bold;">
                <el-tag style="margin-right: 10px;font-weight: normal;">霸王餐详情</el-tag>
                {{list.activity.act_no}}
                <el-popconfirm title="确定关闭此条霸王餐活动吗？" @onConfirm="cancel">
                    <el-button slot="reference" circle type="danger" size="mini" icon="el-icon-delete"></el-button>
                </el-popconfirm>
            </h4>
        </div>
        <div class="detail_form">
            <el-card shadow="hover" class="detail_card" v-if="list.activity.status === 4">
                <div slot="header">
                    <span style="font-weight: bold;">取消信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="取消人" v-if="list.activity.cancel_user_name">{{list.activity.cancel_user_name}}</el-form-item>
                    <el-form-item label="取消时间">{{list.activity.canceled_at}}</el-form-item>
                    <el-form-item label="取消原因">{{list.activity.remark}}</el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" v-if="list.winning" class="detail_card">
                <div slot="header">
                    <span style="font-weight: bold;">当前活动正在开奖，中奖人信息：</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="达人昵称" @click="$refs.talentDetail.init(list.winning.talent_id)">
                        <el-button type="text"  @click="$refs.talentDetail.init(list.winning.talent_id)">{{list.winning.account_name}}</el-button>
                    </el-form-item>
                    <el-form-item label="达人等级">{{list.winning.channel_name}}</el-form-item>
                    <el-form-item label="轮转时间">{{list.winning.win_at}}</el-form-item>
                    <el-form-item label="超时时间">{{list.winning.cancel_at}}</el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" v-if="list.winner && list.winner.account_name" class="detail_card">
                <div slot="header">
                    <span style="font-weight: bold;">中奖信息</span>
                    <el-popconfirm v-if="list.activity.overtime" title="确定核销此条霸王餐活动吗？" @onConfirm="consume">
                        <el-button slot="reference" round type="success" style="margin-left: 10px;">核销</el-button>
                    </el-popconfirm>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="达人昵称" @click="$refs.talentDetail.init(list.winner.talent_id)">
                        <el-button type="text"  @click="$refs.talentDetail.init(list.winner.talent_id)">{{list.winner.account_name}}</el-button>
                    </el-form-item>
                    <el-form-item label="达人等级">{{list.winner.channel_name}}</el-form-item>
                    <el-form-item label="已核销" v-if="list.winner.win_id">{{list.winner.consumed?'是':'否'}}</el-form-item>
                    <el-form-item label="核销时间" v-if="list.winner.consumed">{{list.winner.consumed_at}}</el-form-item>
                    <el-form-item label="核销人" v-if="list.winner.consumed">{{list.winner.consumed_user}}</el-form-item>
                    <el-form-item label="购买图片" style="flex: 1 1 100%;">
                        <el-image style="width: 100px; height: 100px;margin-right: 10px;"
                                  :preview-src-list="[list.winner.buy_img]"
                                  :src="list.winner.buy_img"
                                  fit="cover"></el-image>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" class="detail_card">
                <div slot="header">
                    <span style="font-weight: bold;">活动信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="开始时间">{{list.activity.start_time}}</el-form-item>
                    <el-form-item label="截止时间">{{list.activity.end_time}}</el-form-item>
                    <el-form-item label="领奖时间">{{list.activity.draw_time}}</el-form-item>
                    <el-form-item label="活动状态">{{list.activity.status_name}}</el-form-item>
                    <el-form-item label="活动编号">{{list.activity.act_no}}</el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" class="detail_card">
                <div slot="header">
                    <span style="font-weight: bold;">店铺信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="店铺名称">{{list.shop.shop_name}}</el-form-item>
                    <el-form-item label="联系人">{{list.shop.contact_man}}</el-form-item>
                    <el-form-item label="联系电话">{{list.shop.contact_phone}}</el-form-item>
                    <el-form-item label="微信昵称">{{list.shop.nickname}}</el-form-item>
                    <el-form-item label="微信手机">{{list.shop.phone}}</el-form-item>
                    <el-form-item label="openid">{{list.shop.openid}}</el-form-item>
                    <el-form-item label="店铺区域">{{list.shop.short_name}}</el-form-item>
                    <el-form-item label="店铺地址">{{list.shop.address}}</el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" style="margin-bottom: 10px;">
                <div slot="header">
                    <span style="font-weight: bold;">奖品信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="奖品名称">{{list.goods.goods_name}}</el-form-item>
                    <el-form-item label="商品价格">{{list.goods.price}}</el-form-item>
                    <el-form-item label="标题图" style="flex: 1 1 100%;">
                        <el-image style="width: 100px; height: 100px;margin-right: 10px;"
                                  :preview-src-list="[list.goods.title_img]"
                                  :src="list.goods.title_img"
                                  fit="cover"></el-image>
                    </el-form-item>
                    <el-form-item label="奖品图片" style="flex: 1 1 100%;">
                        <el-image style="width: 100px; height: 100px;margin-right: 10px;"
                                  :preview-src-list="list.goods.goods_img"
                                  v-for="(item,index) in list.goods.goods_img"
                                  :key="index"
                                  :src="item"
                                  fit="cover"></el-image>
                    </el-form-item>
                    <el-form-item label="详情">
                        <el-input type="textarea" v-model="list.goods.detail" autosize readonly style="border: none;"
                                  class="goods_detail"/>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" class="detail_card">
                <div slot="header">
                    <span style="font-weight: bold;">参与记录</span>
                </div>
                <el-table
                    :data="list.participate"
                    style="width: 100%">
                    <el-table-column prop="account_name" label="达人昵称">
                        <template slot-scope="scope">
                            <el-button type="text" @click="$refs.talentDetail.init(scope.row.talent_id)">{{scope.row.account_name}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="code" label="抽奖号码"></el-table-column>
                    <el-table-column prop="channel_name" label="等级"></el-table-column>
                    <el-table-column prop="created_at" label="参与时间"></el-table-column>
                </el-table>
            </el-card>
        </div>
        <talent-detail-dialog ref="talentDetail" @refresh="$store.dispatch('tableReload')"></talent-detail-dialog>
    </el-drawer>
</template>

<script>
    import TalentDetailDialog from "../../laifei/Dialog/TalentDetailDialog";

    export default {
        name: "ActivityDetailDialog",
        components:{
            TalentDetailDialog,
        },
        data() {
            return {
                show: false,
                loading: false,
                list: {
                    activity: {},
                    goods: {
                        title_img: '',
                        goods_img: [],
                    },
                    shop: {},
                    winner: null,
                    participate: [],
                    winning:null,
                },
                pending: false,
            }
        },
        methods: {
            init(row) {
                this.act_id = row.act_id;
                this.loading = true;
                this.show = true;
                this.pending = false;
                this.loadData();
            },
            // 查询详情
            loadData() {
                this.dialog = true;
                this.post('/api/activity/activity/detail', {act_id: this.act_id}).then(result => {
                    if (result.code === 0) {
                        this.list = result.data;
                        if (this.list.activity.status !== 3 && this.list.activity.status !== 4) {
                            this.pending = true;
                        }
                        this.loading = false;
                    } else {
                        this.$message.error(result.msg);
                        this.loading = false;
                    }
                }).catch(e => {
                    console.log(e);
                    this.$message.error('预开奖信息加载异常');
                    this.loading = false;
                });
            },
            consume() {
                this.post('/api/activity/activity/consume', {act_id: this.act_id}).then(result => {
                    if (result.code === 0) {
                        this.loadData();
                        this.$message.success(result.msg);
                        this.$emit('refresh');
                    } else {
                        this.$message.error(result.msg);
                        this.loading = false;
                    }
                })
            },
            cancel() {
                this.post('/api/activity/activity/cancel', {act_id: this.act_id}).then(result => {
                    if (result.code === 0) {
                        this.loadData();
                        this.$message.success(result.msg);
                        this.$emit('refresh');
                    } else {
                        this.$message.error(result.msg);
                        this.loading = false;
                    }
                })
            },

        }
    }
</script>

<style scoped>
    .detail_form {
        padding: 0 10px;
    }

    .detail_card {
        margin-bottom: 10px;
    }

    .detail_card .el-form-item {
        margin-bottom: 0;
    }

    .detail_card .el-form {
        display: flex;
        flex-wrap: wrap;
    }

    .detail_card .el-form-item {
        flex: 0 0 33%;
    }

    .detail_card .el-card__header {
        padding: 8px 20px;
    }

    .box-card {
        width: 100%;
    }
</style>
<style>
    .goods_detail > textarea {
        border: none;
        resize: none;
        font-size: 14px;
        padding-left: 0;
    }
</style>
